<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="rgba(0,0,0,0)">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #000"
        ></view>
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"> </view>
      </view>
    </cloudHeader>
    <view class="container">
      <image src="/static/login/logo.png" class="login_logo" />
      <view class="register_box">
        <!-- nav切换 -->
        <view class="nav_item">
          <graceNavBar
            :items="registerNav"
            :animatie="false"
            textAlign="center"
            activeDirection="center"
            :currentIndex="navIndex"
            @change="navChange"
            activeFontSize="30rpx"
            :margin="120"
            color="rgba(255,255,255,0.6)"
            activeColor="#fff"
            activeLineBg="linear-gradient(270deg, #FEECBF 0%, #FFDB86 100%)"
            :size="200"
          ></graceNavBar>
        </view>
        <reg-mobile v-if="navIndex == 0" />
        <reg-email v-if="navIndex == 1" />
      </view>
    </view>
  </cloudPage>
</template>

<script>
import regMobile from "./components/regMobile";
import regEmail from "./components/regEmail";
export default {
  components: {
    regMobile,
    regEmail,
  },
  data() {
    return {
      navIndex: 0,
    };
  },
  computed: {
    registerNav() {
      return [
        this.$t("mf.auth.register_mobile"),
        this.$t("mf.auth.register_email"),
      ];
    },
  },
  methods: {
    navChange(index) {
      this.navIndex = index;
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  /* padding-top: 480rpx; */
}
.login_logo {
  width: 188rpx;
  height: 226rpx;
  position: relative;
  top: 0rpx;
  left: 50%;
  transform: translateX(-50%);
}
.register_box {
  width: 100%;
  position: absolute;
  top: 300rpx;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 60rpx 60rpx 0px 0px;
  padding: 60rpx;
  box-sizing: border-box;
}
.nav_item {
  box-sizing: border-box;
  padding-left: 60rpx;
  margin-bottom: 80rpx;
}
</style>